<template>
  <div v-if="styleType == 1" class="c-bg-sgray">
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="courseList && courseList.length > 0"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">课程推荐</h2>
      <div
        class="c-flex-row c-aligni-start c-pt20 c-pb20"
        :class="(courseList.length - 1) == index ? '' : 'bd-b1-f5'"
        v-for="(item,index) in courseList"
        :key="index"
        @click="clickCourseItem(item.courseId, item.courseType)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br4 c-flex-shrink0">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.courseAvatar, require('../../assets/defult270.png'))" />
        </div>
        <div class="c-pl20 c-flex-grow1">
          <div class="c-flex-column c-justify-sb imgSocailDiv c-hh140">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb">
              <span
                class="c-fc-xmlred"
                v-if="item.isSaleonly == 1"
              >
                <span
                  class="c-fs22"
                  v-if="item.payType ==2"
                >{{'￥' | iosPriceFilter(item.optimal)}}</span>
                <span class="">{{item.payType | priceValueFilter(item.price, 5, item.optimal)}}</span>
              </span>
              <span
                class="c-fc-xmlred"
                v-else
              >关联售卖</span>
              <span v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course))">{{item.plays | formatNumber}}次观看</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="columnList && columnList.length > 0 && companyAuth.enableColumnModule == 1"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">专栏推荐</h2>
      <div
        class="c-flex-row c-aligni-start c-pt20 c-pb20"
        v-for="(item,index) in columnList"
        :key="index"
        :class="(columnList.length - 1) == index ? '' : 'bd-b1-f5'"
        @click="clickColumnItem(item.columnId)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br4 c-flex-shrink0">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        </div>
        <div
          class="c-pl20 c-flex-grow1"
        >
          <div class="c-flex-column c-justify-sb imgSocailDiv c-hh140">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb">
              <span class="c-fc-xmlred">
                <span
                  class="c-fs22"
                  v-if="item.payType == 2"
                >{{'￥' | iosPriceFilter(item.optimal)}}</span>
                <span class="">{{item.payType | priceValueFilter(item.price, 9, item.optimal)}}</span>
              </span>
              <span v-if="item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column)))">{{item.sales | formatNumber}}人{{$isWxAppIos() ? '观看' : '购买'}}</span>
              <span v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column))">{{item.clicks | formatNumber}}人观看</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="goodsList && goodsList.length > 0 && companyAuth.enableMallModule == 1"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">商城推荐</h2>
      <div
        class="c-flex-row c-aligni-start c-pv20"
        v-for="(item,index) in goodsList"
        :key="index"
        :class="(goodsList.length - 1) == index ? '' : 'bd-b1-f5'"
        @click="goGoodsDetail(item.mgId)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br4 c-flex-shrink0">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('../../assets/no_chat_img.png'))" />
        </div>
        <div
          class="c-pl20 c-flex-grow1"
        >
          <div class="c-flex-column c-justify-sb imgSocailDiv c-hh140">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb">
              <span class="c-fc-xmlred">
                <span>{{'￥' | iosPriceFilter}}{{item.payType | priceValueFilter(item.price, 12, item.optimal)}}</span>
              </span>
              <span>{{item.sales}}人已购买</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="soicalList && soicalList.length > 0 && companyAuth.enableSocialGroup == 1"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">邀您加入</h2>
      <div
        class="c-flex-row c-aligni-start c-pv20"
        v-for="(item,index) in soicalList"
        :key="index"
        :class="(soicalList.length - 1) == index ? '' : 'bd-b1-f5'"
        @click="goSocial(item.socialRoomId)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br4 c-flex-shrink0">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('../../assets/defult270.png'))" />
        </div>
        <div
          class="c-pl20 c-flex-grow1"
        >
          <div class="c-flex-column c-justify-sb imgSocailDiv c-hh140">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb c-aligni-center">
              <span>
                <span class="c-fc-xmlred">{{item.hasPeople}}</span>人正在热聊
              </span>
              <div class="c-ww144 c-hh48 c-br24 theme-bg c-flex-row c-flex-center c-fc-white">立即加入</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="examList && examList.length > 0 && companyAuth.enableExamModule == 1"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">邀您测试</h2>
      <div
        class="c-flex-row c-aligni-start c-pv20"
        v-for="(item,index) in examList"
        :key="index"
        :class="(examList.length - 1) == index ? '' : 'bd-b1-f5'"
        @click="goExam(item)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br4 c-flex-shrink0">
          <CoverImg v-if="item.type == 1" :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('../../assets/i/wap/common/ceping.png'))" />
          <img
            v-else-if="item.type == 2"
            :src="require('../../assets/icon_papers_defult.png')"
            class="c-maxh c-maxw imgCloseBig c-br4"
          />
          <img
            v-else
            :src="require('../../assets/icon_short_defult.png')"
            class="c-maxh c-maxw imgCloseBig c-br4"
          />
        </div>
        <div
          class="c-pl20 c-flex-grow1"
        >
          <div class="c-flex-column c-justify-sb imgSocailDiv c-hh140">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb">
              <span>考试共{{item.hasPaper}}套</span>
              <span>{{item.hasPeople}}人测试</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="speechList && speechList.length > 0 && companyAuth.enableSpeechTestModule == 1"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">语音测评</h2>
      <div
        class="c-flex-row c-aligni-start c-pv20"
        v-for="(item,index) in speechList"
        :key="index"
        :class="(speechList.length - 1) == index ? '' : 'bd-b1-f5'"
        @click="goSpeech(item.paperMainId)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br16 c-flex-shrink0">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('../../assets/i/wap/common/ceping.png'))" />
        </div>
        <div
          class="c-pl20 c-flex-grow1"
        >
          <div class="c-flex-column c-justify-sb imgSocailDiv c-hh140">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-fs22 c-fc-gray">
              <span>{{item.hasPeople}}人测试</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="mutualList && mutualList.length > 0 && companyAuth.enableMutualTestModule == 1"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">互动测评</h2>
      <div
        class="c-flex-row c-aligni-start c-pv20"
        v-for="(item,index) in mutualList"
        :key="index"
        :class="(mutualList.length - 1) == index ? '' : 'bd-b1-f5'"
        @click="goMutual(item.paperMainId)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br16 c-flex-shrink0">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('../../assets/i/wap/common/ceping.png'))" />
        </div>
        <div
          class="c-pl20 c-flex-grow1"
        >
          <div class="c-flex-column c-justify-sb imgSocailDiv c-hh140">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-fs22 c-fc-gray">
              <span>{{item.hasPeople}}人测试</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="datumList && datumList.length > 0 && companyAuth.enableDatumModule == 1"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">资料下载</h2>
      <div
        class="c-flex-row c-aligni-start c-pv20"
        v-for="(item,index) in datumList"
        :key="index"
        :class="(datumList.length - 1) == index ? '' : 'bd-b1-f5'"
        @click="goDatum(item.datumId)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br4 c-flex-shrink0">
          <CoverImg v-if="item.datumCover" :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.datumCover)" />
          <img
            v-else-if="OFFICE_TYPE.indexOf(item.format)"
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_doc.png"
            alt=""
          />
          <img
            v-else-if="IMG_TYPE.indexOf(item.format)"
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_pic.png"
            alt=""
          />
          <img
            v-else-if="AUDIO_TYPE.indexOf(item.format)"
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_audio.png"
            alt=""
          />
          <img
            v-else-if="VIDEO_TYPE.indexOf(item.format)"
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_video.png"
            alt=""
          />
          <img
            v-else
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_com.png"
            alt=""
          />
        </div>
        <div
          class="c-pl20 c-flex-grow1"
        >
          <div class="c-flex-column c-justify-sb imgSocailDiv c-hh140">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb">
              <span class="c-fc-xmlred">
                <span v-if="item.permission == 21">加密</span>
                <span v-else>
                  <span
                    class="c-fs22"
                    v-if="item.payType == 2"
                  >{{'￥' | iosPriceFilter(item.optimal)}}</span>
                  <span class="">{{item.payType | priceValueFilter(item.price, 9, item.optimal)}}</span>
                </span>
              </span>
              <span>{{item.hadDatums}}人下载</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="eBookList && eBookList.length > 0 && companyAuth.enableEbookModule == 1"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">电子书推荐</h2>
      <div
        class="c-flex-row c-aligni-start c-pv20"
        v-for="(item,index) in eBookList"
        :key="index"
        :class="(eBookList.length - 1) == index ? '' : 'bd-b1-f5'"
        @click="clickEbookItem(item.ebId)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br16 c-flex-shrink0">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('../../assets/defult270.png'))" />
        </div>
        <div
          class="c-pl20 c-flex-grow1"
        >
          <div class="c-flex-column c-justify-sb imgSocailDiv c-hh140">
            <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb">
              <span
                class="c-fc-xmlred"
                v-if="item.isSaleOnly == 1"
              >
                <span
                  class="c-fs22"
                  v-if="item.payType == 2"
                >{{'￥' | iosPriceFilter(item.optimal)}}</span>
                <span class="">{{item.payType | priceValueFilter(item.price, 9, item.optimal)}}</span>
              </span>
              <span
                class="c-fc-xmlred"
                v-else
              >关联售卖</span>
              <span v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.ebooks))">{{item.viewNum | formatNumber}}次阅读</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 圈子推荐 -->
    <div
      class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5"
      v-if="circleList && circleList.length > 0 && companyAuth.enableCircleModule == 1"
    >
      <h2 class="c-fs26 c-fc-xblack c-fw-b">邀您加入</h2>
      <div
        class="c-flex-row c-pv20"
        v-for="(item,index) in circleList"
        :key="index"
        :class="(circleList.length - 1) == index ? '' : 'bd-b1-f5'"
        @click="clickCircleItem(item.circleId)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br16 c-flex-shrink0">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('../../assets/defult270.png'))" />
        </div>
        <div class="c-w0 c-flex-grow1 c-pl20 c-flex-column c-justify-sb">
          <div class="c-fs24 c-fc-xblack c-text-ellipsis2">{{item.name}}</div>
          <div class="c-flex-row c-justify-sb c-aligni-center">
            <div class="c-fs22 c-fc-gray">
              <span class="theme-fc">{{item.memberCount}}</span>人已加入
            </div>
            <div class="c-ww144 c-hh48 c-br24 theme-bg c-flex-row c-flex-center c-fc-white c-fs22">立即加入</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else-if="styleType == 2" :class="articleType == 1 && prodList && prodList.length > 0 ? 'c-bg-white c-ph24 c-pt26 c-pb40' : articleType == 2 && prodList && prodList.length > 0 ? 'c-bg-white c-ph24 c-pt12 c-pb40' : ''">
    <div
      class="c-flex-row c-aligni-start c-pt20 c-pb20"
      v-for="(item, index) in prodList" :key="index" :class="index == prodList.length - 1 ? '' : 'bd-b1-f5'"
      @click="clickGoDetail(item)"
    >
      <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-br16 c-flex-shrink0 c-p">
        <template v-if="item.prodType == cfrom.exam">
          <CoverImg v-if="item.type == 1" :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('../../assets/i/wap/common/ceping.png'))" />
          <img
            v-else-if="item.type == 2"
            :src="require('../../assets/icon_papers_defult.png')"
            class="c-maxh c-maxw imgCloseBig c-br4"
          />
          <img
            v-else
            :src="require('../../assets/icon_short_defult.png')"
            class="c-maxh c-maxw imgCloseBig c-br4"
          />
        </template>
        <template v-else-if="item.prodType == cfrom.datum">
          <CoverImg v-if="item.datumCover" :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.datumCover)" />
          <img
            v-else-if="OFFICE_TYPE.indexOf(item.format)"
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_doc.png"
            alt=""
          />
          <img
            v-else-if="IMG_TYPE.indexOf(item.format)"
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_pic.png"
            alt=""
          />
          <img
            v-else-if="AUDIO_TYPE.indexOf(item.format)"
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_audio.png"
            alt=""
          />
          <img
            v-else-if="VIDEO_TYPE.indexOf(item.format)"
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_video.png"
            alt=""
          />
          <img
            v-else
            class="c-maxh c-maxw imgCloseBig c-br4"
            src="../../assets/i/wap/datum/icon_com.png"
            alt=""
          />
        </template>
        <CoverImg v-else :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.prodType == 110 || item.prodType == 111 || item.prodType == 112 ? item.courseAvatar : item.prodType == cfrom.column ? item.cover : item.avatar, require('../../assets/defult270.png'))" />
        <div class="c-pa c-p-b8 c-p-r8 c-br8 c-fs18 c-fc-white c-ph5 c-hh28 c-flex-row c-flex-center c-translucent-balck50">{{prodTypes[item.prodType]}}</div>
      </div>
      <div class="c-pl20 c-flex-grow1">
        <div class="c-flex-column c-justify-sb imgSocailDiv c-hh120">
          <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
          <div class="c-fs26 c-fc-gray c-flex-row c-justify-sb">
            <span v-if="item.isSaleonly != 1 && item.isSaleOnly != 1 && item.prodType != cfrom.shopping" class="c-fc-xmlred c-fw600 c-fs22" >关联售卖</span>
            <span class="c-fc-xmlred c-fw600" v-else>
              <span class="c-fc-xmlred c-fs20" v-if="item.payType ==2 || (item.prodType == cfrom.shopping && Number(item.price) > 0)">{{'￥' | iosPriceFilter(item.optimal)}}</span>
              <span :class="item.payType ==2 || (item.prodType == cfrom.shopping && Number(item.price) > 0) ? 'c-fs26' : 'c-fs22'">{{item.payType | priceValueFilter(item.price, item.prodType, item.optimal)}}</span>
            </span>
            <template v-if="(item.prodType == 110 || item.prodType == 111 || item.prodType == 112) && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course)))">
              <span class="c-fs22">{{item.plays | formatNumber}}次观看</span>
            </template>
            <template v-if="item.prodType == cfrom.column">
              <span v-if="item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column)))" class="c-fs22">{{item.sales | formatNumber}}人{{$isWxAppIos() ? '观看' : '购买'}}</span>
              <span v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column))" class="c-fs22">{{item.clicks | formatNumber}}人观看</span>
            </template>
            <template v-if="item.prodType == cfrom.shopping">
              <span class="c-fs22">{{item.sales}}人已购买</span>
            </template>
            <template v-if="item.prodType == cfrom.social">
              <span class="c-fs22">{{item.hasPeople}}人正在热聊</span>
            </template>
            <template v-if="item.prodType == cfrom.exam">
              <span class="c-fs22">{{item.hasPeople}}人测试</span>
            </template>
            <template v-if="item.prodType == cfrom.voiceTest">
              <span class="c-fs22">{{item.hasPeople}}人测试</span>
            </template>
            <template v-if="item.prodType == cfrom.mutuaTest">
              <span class="c-fs22">{{item.hasPeople}}人测试</span>
            </template>
            <template v-if="item.prodType == cfrom.datum">
              <span class="c-fs22">{{item.hadDatums}}人下载</span>
            </template>
            <template v-if="item.prodType == cfrom.ebooks && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.ebooks)))">
              <span class="c-fs22">{{item.viewNum | formatNumber}}次阅读</span>
            </template>
            <template v-if="item.prodType == cfrom.circle">
              <span class="c-fs22">{{item.memberCount}}人已加入</span>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
import CoverImg from '@/components/templates/common/coverImg.vue';
export default {
  name: "ActiveAndColumn",
  components: {
    CoverImg
  },
  props: {
    columnList: {
      type: Array,
      default: () => []
    },
    courseList: {
      type: Array,
      default: () => []
    },
    goodsList: {
      type: Array,
      default: () => []
    },
    soicalList: {
      type: Array,
      default: () => []
    },
    examList: {
      type: Array,
      default: () => []
    },
    speechList: {
      type: Array,
      default: () => []
    },
    mutualList: {
      type: Array,
      default: () => []
    },
    datumList: {
      type: Array,
      default: () => []
    },
    eBookList: {
      type: Array,
      default: () => []
    },
    circleList: {
      type: Array,
      default: () => []
    },
    styleType: {
      type: Number,
      default: 1
    },
    articleType: { //图文文章模式
      type: Number,
      default: 1
    },
    isShowAll: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      OFFICE_TYPE: ["doc", "docx", "pdf", "ppt", "pptx", "xls", "xlsx"],
      IMG_TYPE: [
        "bmp",
        "jpg",
        "png",
        "gif",
        "svg",
        "psd",
        "webp",
        "jpeg",
        "eps",
        "tga",
        "tiff"
      ],
      AUDIO_TYPE: [
        "ogg",
        "mp3",
        "wav",
        "asf",
        "wma",
        "mp3pro",
        "real",
        "ape",
        "module",
        "midi",
        "vqf"
      ],
      VIDEO_TYPE: [
        "avi",
        "wmv",
        "mpeg",
        "asf",
        "mpg",
        "dv",
        "rm",
        "rmvb",
        "mod",
        "flv",
        "mp4",
        "qt",
        "divx",
        "mkv",
        "vob"
      ],
      prodList: [],
      cfrom: global.ckFrom,
      prodTypes: global.prodMapType,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  mounted() {
    let prodListTmp = [];
      if (this.courseList && this.courseList.length > 0) {
        this.courseList.forEach((item) => {
          item.prodType = 110 + Number(item.courseType);
        })
        prodListTmp = [...prodListTmp, ...this.courseList];
      }
      if (this.columnList && this.columnList.length > 0 && this.companyAuth.enableColumnModule == 1) {
        this.columnList.forEach((item) => {
          item.prodType = this.cfrom.column;
        })
        prodListTmp = [...prodListTmp, ...this.columnList];
      }
      if (this.goodsList && this.goodsList.length > 0 && this.companyAuth.enableMallModule == 1) {
        this.goodsList.forEach((item) => {
          item.prodType = this.cfrom.shopping;
        })
        prodListTmp = [...prodListTmp, ...this.goodsList];
      }
      if (this.soicalList && this.soicalList.length > 0 && this.companyAuth.enableSocialGroup == 1) {
        this.soicalList.forEach((item) => {
          item.prodType = this.cfrom.social;
        })
        prodListTmp = [...prodListTmp, ...this.soicalList];
      }
      if (this.examList && this.examList.length > 0 && this.companyAuth.enableExamModule == 1) {
        this.examList.forEach((item) => {
          item.prodType = this.cfrom.exam;
        })
        prodListTmp = [...prodListTmp, ...this.examList];
      }
      if (this.speechList && this.speechList.length > 0 && this.companyAuth.enableSpeechTestModule == 1) {
        this.speechList.forEach((item) => {
          item.prodType = this.cfrom.voiceTest;
        })
        prodListTmp = [...prodListTmp, ...this.speechList];
      }
      if (this.mutualList && this.mutualList.length > 0 && this.companyAuth.enableMutualTestModule == 1) {
        this.mutualList.forEach((item) => {
          item.prodType = this.cfrom.mutuaTest;
        })
        prodListTmp = [...prodListTmp, ...this.mutualList];
      }
      if (this.datumList && this.datumList.length > 0 && this.companyAuth.enableDatumModule == 1) {
        this.datumList.forEach((item) => {
          item.prodType = this.cfrom.datum;
        })
        prodListTmp = [...prodListTmp, ...this.datumList];
      }
      if (this.eBookList && this.eBookList.length > 0 && this.companyAuth.enableEbookModule == 1) {
        this.eBookList.forEach((item) => {
          item.prodType = this.cfrom.ebooks;
        })
        prodListTmp = [...prodListTmp, ...this.eBookList];
      }
      if (this.circleList && this.circleList.length > 0 && this.companyAuth.enableCircleModule == 1) {
        this.circleList.forEach((item) => {
          item.prodType = this.cfrom.circle;
        })
        prodListTmp = [...prodListTmp, ...this.circleList];
      }
      this.prodList = prodListTmp;
      if (!this.isShowAll) {
        this.prodList = this.prodList.filter((item, index) => {
          return index < 3;
        })
      }
  },
  computed: {
  },
  methods: {
    clickGoDetail(pItem) {
      if (pItem.prodType == this.cfrom.exam) {
        this.goExam(pItem);
        return;
      }
      let idNameMap = {
        '110': 'courseId',
        '111': 'courseId',
        '112': 'courseId',
        '9': 'columnId',
        '12': 'mgId',
        '10': 'socialRoomId',
        '11': 'id',
        '77': 'paperMainId',
        '75': 'paperMainId',
        '8': 'datumId',
        '142': 'ebId',
        '181': 'circleId'
      }
      let prodId = pItem[idNameMap[pItem.prodType]];
      let pProdType = pItem.prodType == 110 || pItem.prodType == 111 || pItem.prodType == 112 ? this.cfrom.course : pItem.prodType;
      let type = pItem.prodType == 110 || pItem.prodType == 111 || pItem.prodType == 112 ? pItem.courseType : '';
      goDetails(this, pProdType, prodId, '', type)
    },
    goGoodsDetail: function (id) {
      this.$routerGo(this, "push", { path: '/mall/shopDetail/shopDetail', query: { shopNo: id } });
    },
    goExam: function (item) {
      if (item.type == 1) {
        this.$routerGo(this, "push", { path: '/homePage/examination/examinationDetail', query: { ExaminationNo: item.id } });
        return;
      }
      if (item.hasAns == 0) {
        this.$showCjToast({
          text: "该考试暂无题目，请联系管理员",
          type: 'warn',
          time: 3000
        });
        return;
      }
      if (item.examStatus == 0) {
        utilJs.postMethod(global.apiurl + "paperLibrary/createExam", {
          paperMainId: item.id,
          topicId:item.topicId
        }, res => {
          this.$routerGo(this, "push", { path: `/homePage/examination/examinationAnswer?isRelevance=1&paperMainId=${item.id}&topicId=${item.topicId}&goOnNum=1` });
        })
        return;
      }
      if (item.examStatus == 1) {
        this.$routerGo(this, "push", { path: `/homePage/examination/examinationResult?isRelevance=1&paperMainId=${item.id}&topicId=${item.topicId}` });
        return;
      }
      if (item.examStatus == 2) {
        this.$routerGo(this, "push", { path: `/homePage/examination/examinationAnswer?isRelevance=1&paperMainId=${item.id}&topicId=${item.topicId}&goOnNum=${item.goOnNum}` });
      }
    },
    goSpeech: function (id) {
      this.$routerGo(this, "push", { path: '/homePage/voiceTest/voiceTestDetail', query: { paperMainId: id } });
    },
    goMutual: function (id) {
      this.$routerGo(this, "push", { path: '/homePage/mutuaTest/mutuaTestDetail', query: { mutuaTestId: id } });
    },
    goSocial: function (id) {
      this.$routerGo(this, "push", { path: '/homePage/socialGroup/socialGroupInfo', query: { SocialRoomId: id } });
    },
    goDatum: function (id) {
      this.$routerGo(this, "push", { path: '/homePage/datum/datumDetail', query: { datumId: id } });
    },
    clickCourseItem(courseId, type) {
      let t = Number(type);
      switch (t) {
        case 0:
          this.$routerGo(this, "push", {
            path: "/homePage/course/video",
            query: {
              courseId: courseId,
              extId: -1,
              ckFrom: global.ckFrom.course
            }
          });
          break;
        case 1:
          this.$routerGo(this, "push", {
            path: "/homePage/course/voice",
            query: {
              courseId: courseId,
              extId: -1,
              ckFrom: global.ckFrom.course
            }
          });
          break;
        case 2:
          this.$routerGo(this, "push", {
            path: "/homePage/course/imgText",
            query: {
              courseId: courseId,
              extId: -1,
              ckFrom: global.ckFrom.course
            }
          });
          break;
      }
    },
    clickColumnItem(columnNo) {
      //点击专栏
      this.$routerGo(this, "push", {
        path: "/homePage/column/columnDetail",
        query: { cId: -1, ckFrom: global.ckFrom.column, extId: columnNo }
      });
    },
    clickEbookItem(ebId) {
      //点击电子书
      this.$routerGo(this, "push", {
        path: "/homePage/ebooks/ebooksDetail",
        query: { id: ebId }
      });
    },
    clickCircleItem(circleId) {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: { id: circleId }
      });
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.imgSocail {
  width: 2.5rem;
  max-height: 2.5rem;
}
.imgSocail > img {
  max-height: 2.5rem;
}
.imgSocailDiv {
  min-height: 2.5rem;
}
.img-down {
  width: 0.36rem;
  height: 0.3rem;
}
.imgCourse {
  max-height: 2.5rem;
  width: 3.75rem;
  overflow: hidden;
}
.bd-b1-f5 {
  border-bottom: 1px solid #f5f5f5;
}
</style>
